<template>
  <div>
    <a-layout class="layout">
      <app-header class="ant-layout-header" />
      <a-layout>
        <a-layout-sider width="280" class="app-aside">
          <app-layout-side></app-layout-side>
        </a-layout-sider>
        <a-layout class="app-main">
          <app-breadcrumb></app-breadcrumb>
          <a-layout-content class="app-content">
            <!-- 顶层 router-view,它渲染顶层路由匹配的组件 -->
            <router-view />
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import AppHeader from "./app-header/index.vue";
import AppLayoutSide from "./app-side/index.vue";
import AppBreadcrumb from "./app-breadcrumb/index.vue";

export default defineComponent({
  name: "AppLayout",
  components: {
    AppHeader,
    AppLayoutSide,
    AppBreadcrumb
  },
  setup() {
    return {};
  }
});
</script>

<style lang="less" scoped>
@import "app.less";
</style>
